<!-- <template>
  <div>

  </div>
</template> -->
<!-- render函数定义组件模板结构 和template标签是互斥的 -->
<script lang="tsx">
import { h, render } from 'vue';
//vue中除了可以使用template定义模板结果 还可以使用render函数来渲染 和template互斥
export default {
  //   //render函数 return的结果会当作当前组件的模板结构
  //   render() {
  //     return h('h1', { title: 'h1大标题', id: 'header' }, '我是大标题')
  //   }
  //使用render+h创建复杂结构 就很复杂困难
  //即便配置了 jsx 看的像是html结构 其实都是虚拟dom
  render() {
    return (
      <div>
        <ul>
          <li>111</li>
          <li>222</li>
          <li>333</li>
          <li>444</li>
        </ul>
      </div>
    )
  }
}


</script>

<style scoped>
#header {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>